<template>
  <div class="custom-container">
    <navigationBar
        ref="nav"
        :theme="navTheme"/>
    <main class="main">
      <div class="carousel">
        <el-carousel :interval="5000" arrow="always">
          <el-carousel-item v-for="item in 4" :key="item">
            <img src="../../assets/image/background/1.jpg" alt="轮播图" width="100%"/>
            <div class="carousel-font">
              <div class="carousel-font-title">Welcome to our platform</div>
              <div class="carousel-font-main">It is a platform dedicated to providing students with better and more
                convenient <br>learning situation analysis and employment planning guidelines
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="introduce">
        <div class="introduce-top">
          <div class="introduce-top-icon"><i class="iconfont icon-xuexiwangke"></i></div>
          <div class="introduce-top-title">学习者画像平台</div>
          <div class="introduce-top-main">
            <div>平台打破了以往通过传统的人工数据采集、 存储等来进行分析的短板，在数据画像的基础上结合了大数据分析等技术，</div>
            <div class="item">致力于为学生提供更优质便捷的学习情况分析以及就业规划指引。</div>
          </div>
        </div>
        <div class="introduce-main">
          <div class="introduce-main-item">
            <div class="icon"><i class="iconfont icon-huaxiangfenxi"></i></div>
            <div class="introduce-main-item-title">大数据分析</div>
            <div class="introduce-main-item-main">平台打破了以往通过传统的人工数据采集、
              存储等来进行分析的短板，在数据画像的基础上结合了大数据分析等技术，致力于为学生提供更优质便捷的学习情况分析以及就业规划指引。
            </div>
          </div>
          <div class="introduce-main-item">
            <div class="introduce-main-item">
              <div class="icon"><i class="iconfont icon-huaxiangfenxi"></i></div>
              <div class="introduce-main-item-title">用户画像技术框架</div>
              <div class="introduce-main-item-main">
                选用Spark,这里Spark的主要用途有两种，一种是对于数据处理与上层应用所指定的规则的数据筛选过滤，一种是服务于上层应用的SparkSQL。
                对于标签数据的打分，比如利用协同过滤算法等各种推荐算法对数据进行各方面评分。
              </div>
            </div>
          </div>
          <div class="introduce-main-item">
            <div class="introduce-main-item">
              <div class="icon"><i class="iconfont icon-huaxiangfenxi"></i></div>
              <div class="introduce-main-item-title">大屏可视化技术</div>
              <div class="introduce-main-item-main">采用pycharts进行可视化图片绘制。
                pyecharts 是一个用于生成 Echarts 图表的类库。Echarts是一个由百度开源的数据可视化，凭借着良好的交互性，精巧的图表设计，得到了众多开发者的认可。
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="analysis">
        <div class="analysis-main">
          <h2>700 多用户正在 笃学网 上学习。</h2>
          <p>看看他们如何实现目标：</p>
          <div class="main">
            <div class="main-item">
              <div class="item-title">78%</div>
              <div class="item-main">
                <span><strong>的求学者获得了一定的优势</strong>，例如确定目标，找到学习方向</span>
              </div>
            </div>
            <div class="main-item">
              <div class="item-title">67%</div>
              <div class="item-main">
                <span><strong>的求学者表示获得了一定优势</strong>，例如成功准备考试或致力于研究某个领域</span>
              </div>
            </div>
            <div class="main-item">
              <div class="item-title">95%</div>
              <div class="item-main">
                <span><strong>的学生表示在 笃学网 上学习后信心倍增</strong></span>
              </div>
            </div>
          </div>
          <div class="footer">
            <div class="footer-main">
              <p>来源：笃学网 学生结果调查* 2021</p>
              <p style="color:gray">*学生在 笃学网 上完成课程 6 个月之后会收到 笃学网 学生结果调查。</p>
            </div>
          </div>
        </div>
      </div>
      <router-view></router-view>

    </main>
    <v-footer
        dark
        padless
    >
      <v-card
          flat
          tile
          class="indigo lighten-1 white--text text-center"
      >
        <v-card-text>
          <v-btn
              class="mx-4 white--text"
              icon
          >
            <v-icon size="24px">
              mdi-calendar
            </v-icon>
          </v-btn>
          <v-btn
              class="mx-4 white--text"
              icon
          >
            <v-icon size="24px">
              mdi-calendar
            </v-icon>
          </v-btn>
          <v-btn
              class="mx-4 white--text"
              icon
          >
            <v-icon size="24px">
              mdi-calendar
            </v-icon>
          </v-btn><v-btn
            class="mx-4 white--text"
            icon
        >
          <v-icon size="24px">
            mdi-calendar
          </v-icon>
        </v-btn>

        </v-card-text>

        <v-card-text class="white--text pt-0">
          Phasellus feugiat arcu sapien, et iaculis ipsum elementum sit amet. Mauris cursus commodo interdum. Praesent ut risus eget metus luctus accumsan id ultrices nunc. Sed at orci sed massa consectetur dignissim a sit amet dui. Duis commodo vitae velit et faucibus. Morbi vehicula lacinia malesuada. Nulla placerat augue vel ipsum ultrices, cursus iaculis dui sollicitudin. Vestibulum eu ipsum vel diam elementum tempor vel ut orci. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
        </v-card-text>

        <v-divider></v-divider>

        <v-card-text class="white--text">
          {{ new Date().getFullYear() }} — <strong>Vuetify</strong>
        </v-card-text>
      </v-card>
    </v-footer>
  </div>
</template>

<script>
    import navigationBar from "@/components/navigationBar/navigationBar";

    export default {
        name: "Login",
        components: {
            navigationBar
        },
        data() {
            return {
                navTheme: 'light',
            }
        },
        methods: {},
        mounted() {
            setTimeout(() => {
                // this.navTheme = 'dark';
                // this.navTheme = 'transparent';
            }, 500);
        }
    }
</script>

<style lang="scss" scoped>
  .custom-container {
    width: 100vw;
    height: 100%;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: cover;

    .carousel {
      width: 100%;
      height: 650px;
    }

    .el-carousel__item h3 {
      color: #475669;
      font-size: 20px;
      opacity: 0.75;
      line-height: 300px;
      margin: 0;
    }

    .el-carousel__item {
      background-color: #a7a7a7;
    }

    ::v-deep .el-carousel__container {
      height: 650px;
    }

    .carousel-font {
      position: absolute;
      top: 50%;
      left: 30%;
    }

    .carousel-font-title {
      font-size: 30px;
      font-weight: 700;
      color: #909399;
      font-family: "JetBrains Mono Light";
      letter-spacing: 0.0625em;
    }

    .carousel-font-main {
      color: #fffefe;
      word-spacing: 3px;
      margin-top: 30px;
    }

    /* 介绍模块 */
    .introduce {
      padding-top: 92px;
      position: relative;
      height: 660px;
    }

    .introduce-top {
      text-align: center;
    }

    .introduce-top-icon i {
      font-size: 30px;
    }

    .introduce-top-title {
      color: #000000;
      font-size: 27px;
      font-family: "JetBrains Mono NL Light";
      margin-top: 16px;
      letter-spacing: 0.1em;
      font-weight: 600;
    }

    .introduce-top-main {
      color: #cfcfcf;
      font-size: 16px;
      margin-top: 30px;
    }

    .introduce-top-main .item {
      margin-top: 10px;
    }

    .introduce-main {
      display: flex;
      margin: 60px auto 0;
      max-width: 1340px;
    }

    .introduce-main-item {
      flex: 1
    }

    .introduce-main-item .icon {
      width: 75px;
      height: 75px;
      border-radius: 50%;
      background-color: #ffe600;
      line-height: 75px;
      text-align: center;
      margin: 0 auto;
    }

    .introduce-main-item .icon i {
      font-size: 35px;
    }

    .introduce-main-item div {
      text-align: center;
    }

    .introduce-main-item-main {
      padding: 0 14px;
      font-size: 14px;
      letter-spacing: 1px;
    }

    .introduce-main-item-title {
      height: 66px;
      line-height: 66px;
      font-size: 16px;
      font-weight: 600;
    }

    .introduce-main-item-main {
      color: #666;
      line-height: 26px;
    }

    .analysis {
      width: 100%;
      height: auto;
      background-color: #dbeef6;
      padding-top: 64px;

      .analysis-main {
        text-align: center;
        margin: 0 auto;
        max-width: 1340px;
        h2 {
          font-size: 28px;
          line-height: 2.625rem;
          font-weight: bold !important;
          margin-bottom: 16px;
        }

        p {
          font-size: 16px;
          line-height: 24px;
          margin-bottom: 36px;
          text-align: center;
        }
        .main {
          display: flex;
          flex-wrap: wrap;
          -webkit-box-pack: justify;
          margin: 59px 0px 63px;
          justify-content: space-between;
          .main-item {
            flex: 1;
            .item-title {
              text-align: center;
              font-size: 50px;
              font-weight: 700;
              margin: 0 0 8px;
              color: rgb(68, 146, 227);
            }
            .item-main {
              font-size: 16px;
              line-height: 24px;
              text-align: center;
            }
          }
        }
        .footer {
          width: 100%;
          .footer-main {
            text-align: center;
            padding: 0 0 48px;
            width: 100%;
          }
        }
      }
    }
  }
</style>